<template>
  <div>
    <el-select
      v-model="dateValue"
      style="width: 100%"
      @change="setDateRange(dateValue)"
      ref="selectVal"
    :popper-append-to-body="true"
      @visible-change="changeValue($event,dateValue)"
      :popper-class="isHidden?'selectDate eloption':'datePop eloption'"
    >
      <el-option
        v-for="(item,index) in dateOptions"
        :class="isShow[index]?'selected dateOption':'dateOption'"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <div class="dateSelect" v-if="item.value == 5">
            <p>自定义</p>
            <p>
            <span>从</span>
            <el-date-picker
                v-model="form.startDate"
                type="date"
                placeholder="选择开始日期"
                :picker-options="setStartDisabled"
                value-format="yyyy-MM-dd"
                popper-class="startClass"
                @focus="focusStart"
            >
            </el-date-picker>
            </p>
            <p>
            <span>至</span>
            <el-date-picker
                v-model="form.endDate"
                type="date"
                :picker-options="setFinshisabled"
                value-format="yyyy-MM-dd"
                placeholder="选择结束日期"
                popper-class="endClass"
                @focus="focusEnd"
            >
            </el-date-picker>
            </p>
            <el-button type="primary" class="btn" @click="getSumbit(form)">确认</el-button>
        </div>
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { off } from 'process';

export default {
    props:{
        createDate:{
            type:Array,
            default:[],
        }
    },
    data() {
        return{
            form:{
                startDate:'',
                endDate:'',
            },
            dateOptions:[
                {
                    label: '全部',
                    value: 1
                },
                {
                    label: '今天',
                    value: 2
                },
                {
                    label: '昨天',
                    value: 3
                },
                {
                    label: '30天',
                    value: 4
                },
                {
                    label: ' ',
                    value: 5
                }
                ],
            isHidden:false,
            isShow:[],
            dateValue: 1, // 时间选择状态
            dateRange: [],
            customValue:'',
            nowDate: null,
            setStartDisabled: {
                disabledDate: (time) => {
                    if (this.form.endDate) {
                        return time.getTime() > new Date(this.form.endDate).getTime();
                     }else{

                     }
                },
            },
            setFinshisabled: {
                disabledDate: (time) => {
                    if(this.form.startDate){
                        return time.getTime() <= new Date(this.form.startDate).getTime() - 86400000;
                    }
                }
            }
        }
    },
  created(){
    console.log(this.createDate,'createDatecreateDate');
    this.dateRange = this.createDate;
  },
  methods: {
     // 1 全部 2今天 3昨天 4 30天 5 自定义
     setDateRange(val) {
        console.log(val,'选中值');
        var startDay = null
        var endDay = null
        // this.dateValue = val
        if (val === 1) {
            startDay = ''
            endDay = ''
        } else if (val === 2) {
            startDay = 1
            endDay = 1
        } else if (val === 3) {
            startDay = 0
            endDay = 0
        } else if (val === 4) {
            startDay = -29
            endDay = 1
        } else if (val === 5) {
            // console.log(val,'valvalaaaaaaaaaaa');
        } else {
            return
        }
        if(val == 1){
            this.dateValue = val;
            this.dateOptions.map((item,index)=>{
                this.isShow[index] = false;
            })
            this.dateRange = [];
            this.$emit('getSelectData',this.dateRange)
            this.form.startDate = '';
            this.form.endDate = '';
        }else if(val == 5){
            this.dateValue = this.customValue;
            this.dateOptions.map((item,index)=>{
                if(val == item.value){
                    this.isShow[index] = true;
                }else{
                    this.isShow[index] = false;
                }
            })
        }else{
           this.dateOptions.map((item,index)=>{
                if(val == item.value){
                    this.isShow[index] = true;
                }else{
                    this.isShow[index] = false;
                }
           })
            var startTime = this.getTimeByDayNum(startDay);
            console.log(startTime,'开始时间-----------');
            // 结束时间
            var endTime = this.getTimeByDayNum(endDay);
            console.log(endTime,'结束时间-----------');
            this.dateRange = [startTime , endTime ];
            this.$emit('getSelectData',this.dateRange);
            this.dateValue = startTime + '至' + endTime;
            this.form.startDate = '';
            this.form.endDate = '';
           
        }
    },
    getTimeByDayNum (dayNum) {
      var d = new Date()
      d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * dayNum)
      let mouth = d.getMonth() + 1 >= 11 ? d.getMonth() : '0' + (d.getMonth() + 1)
      let day = d.getDate() >= 11 ? d.getDate() - 1 : '0' + (d.getDate() - 1)
      var time = d.getFullYear() + '-' + mouth + '-' + day + ' '
      return time
    },
    focusStart(val){
        this.dateValue = 5;
        this.dateOptions.map((item,index)=>{
            this.isShow[index] = false;
        })
    },
    focusEnd(val){
        this.dateValue = 5;
        this.dateOptions.map((item,index)=>{
            this.isShow[index] = false;
        })
    },
    changeValue(e,val){
        // console.log(e,val,'eeeeeeeeeeeeeeee');
        if(val == 5 || val== ''){
            this.$refs.selectVal.visible = true;
        }
    },
    getSumbit(val){
        // console.log(this.$refs.selectVal,'getSumbitgetSumbit');
        if(val.startDate == '' || val.endDate == ''){
            this.$message.error('请选择日期');
            return false
        }
        this.dateRange = [val.startDate , val.endDate ];
        this.$emit('getSelectData',this.dateRange);
        this.customValue = val.startDate + '至' + val.endDate;
        this.dateValue = this.customValue;
        // console.log(this.dateValue,'this.dateValuethis.dateValuethis.dateValue');
        this.$refs.selectVal.blur();
        this.form.startDate = '';
        this.form.endDate = '';
    },
  },
  watch:{
    createDate:{
        handler(val,old){
           console.log(val,'日期'); 
           if(val.length == 0){
                this.dateValue = 1;
                this.dateOptions.map((item,index)=>{
                    this.isShow[index] = false;
                })
           }
        },
        immediate:true,
        deep:true,
    }
  }
};
</script>
<style lang="scss" scoped>
.dateSelect{
    height: 160px;
    border-top: 1px solid rgba(0,0,0,0.06);
    p{
        margin: 0;
        span{
            font-size: 12px;
            font-weight: 400;
            color: #777777;
            line-height: 18px;
            margin-right: 9px;
            
        }
        ::v-deep .el-input--prefix{
            .el-input__inner{
                padding-left: 10px !important;
            }
        }
        ::v-deep .el-input__prefix{
            display: none;
           
        }
        ::v-deep .el-input__suffix{
            display: none;
        }
    }
    .btn{
        margin-top: 20px;
        margin-left: 40%;
    }
}

.dateOption:last-child{
    height: 160px;
}
::v-deep .el-select-dropdown.el-popper.selectDate{
    display: block !important;
    position: absolute;
    top: 177px;
    left: 1078px;
}
.startDateClass{
    z-index: 3080 !important; 
    left: 80%;
}
.endDateClass.el-picker-panel{
    z-index: 3080 !important; 
    left: 80%;
}
</style>